<!--
list
-->
<template>
    <div class="box">
        <li class="index-activity index">
            <div class="sa-box">
                <router-link :to="{name:'activity',params:{actId:item.id}}" class="single-activity"  v-for="item in list" :key="item.id" replace>
                    <div class="statuts">
                        <div v-if="item.actApplyStauts*1===0" class="blue">未开始</div>
                        <div v-if="item.actApplyStauts*1===1" class="blue">进行中</div>
                        <div v-if="item.actApplyStauts*1===2" class="gray">已结束</div>
                    </div>
                    <img v-if="item.activityPoster !=''" :src="picHead+item.activityPoster" alt="">

                    <p class="omit2">{{item.activityTitle}}</p>
                    <div class="actbotline">
                        <span class="time-act">{{item.actStartTime | actDateFormate}}</span>
                        <span class="address-act">  {{item.city}}{{item.dist}}</span>
                        <span v-if="item.minTicketPrice != item.maxTicketPrice" class="detail price-act font1">¥{{item.minTicketPrice/100}} - ¥{{item.maxTicketPrice/100}}</span>
                        <span v-if="item.minTicketPrice == item.maxTicketPrice && item.minTicketPrice!=0" class="detail price-act font1">¥{{item.minTicketPrice/100}}</span>
                        <span v-if="item.minTicketPrice == item.maxTicketPrice && item.minTicketPrice==0" class="detail price-act font1">免费</span>
                    </div>
                </router-link>
            </div>
        </li>
    </div>
</template>

<script>
    export default {
        props: ['list'],
        data(){
            return{
                picHead : this.$store.state.picHead
            }
        },
        mounted() {

//            console.log(this.$props.actlist,'活动')
        },
        methods: {
        }

    }
</script>

<style lang="less">
    /* 热门活动模块 */
    .index-activity {
        background: #fff;
        .statuts{
            position:absolute;
            .blue{
                padding:2px 4px;
                background: #20A0FF;
                font-size: 9px;
                color: #FFFFFF;
            }
            .gray{
                padding:2px 4px;
                background: #DDDDDD;
                font-size: 9px;
                color: #333;
            }
        }
        .sa-box {
            padding: 0 .4rem;
            box-sizing: border-box;
            .single-activity {
                display: inline-block;
                padding: .4rem 0;
                border-bottom: 1px solid #eee;
                width: 100%;
            }
        }
        .actbotline {
            line-height: .533rem;
        }
        .time-act {
            float: left;
        }
        .address-act {
            float: left;
            display: inline-block;
            margin-left: .32rem;
            width: 4rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .price-act {
            float: right;
            color: #6699FF !important;
            font-size: .32rem !important;
        }
        .single-activity:first-child {
            padding-top: 0 !important;
        }
        .single-activity img {
            width: 100%;
            height: 4.51rem;
        }
        .single-activity p {
            margin-top: .28rem;
            width: 100%;
            font-size: .426rem;
            line-height: .58rem;
            color: #333333;
        }
        .single-activity span {
            text-align: left;
            display: block;
            margin-top: .14rem;
            font-size: .32rem;
            color: #999;
        }
    }

</style>